<template>
	<div>
		<Header />
		<div>
			<div class="bannerWrapper">
			    <div class="topTitle">
			        需求征集
			    </div>
			    <div class="mapNav">
			        <div class="indexContainer">
			            <el-breadcrumb separator-class="el-icon-arrow-right">
			                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item>需求征集</el-breadcrumb-item>
			            </el-breadcrumb>
			        </div>
			
			    </div>
			</div>

			<div class="indexContainer mobilePadding" style="padding: 10px 0;">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-input v-model="input" placeholder="请输入关键字">
							<el-button slot="append" class="themeGradientColor" type="primary" icon="el-icon-search"
								style="color: white;" @click="handleSearch">立即搜索</el-button>
						</el-input>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-button class="themeGradientColor" type="primary" style="color: white;"
							@click="publishDemand">发布需求</el-button>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<div style="position: relative;">
							<div style="margin:25px 0 40px;" class="mobileMargin">
								<el-row :gutter="20" v-loading="loading"
									:style="{'margin-top':loading==true?'100px':'0px'}">
									<el-col v-for="item in listData" :key="item.id" :xs="24" :sm="24" :md="6" :lg="6"
										:xl="6" style="margin-top: 15px;">
										<div style="background-image: linear-gradient(-30deg, #e4ecf8 0%, #f1f5f9 100%);border-radius: 5px;"
											class="plan" @click="toCollectDetail(item.id)">
											<div
												style="margin: 0 15px;padding: 15px 0;border-bottom: 1px solid #cbcbcb;">
												<h4
													style="font-size: 18px;color: #333333;line-height: 20px;height: 40px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
													{{item.title}}
												</h4>
												<div
													style="font-size: 14px;line-height: 20px;color: #555555;margin-top: 8px;height: 60px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">
													{{item.description}}
												</div>
												<div style="font-size: 14px;color: #aaaaaa;margin: 12px 0;">
													<span>产品形式：</span>
													<span style="color: #555555;">{{item.productForm}}</span>
												</div>

												<div style="font-size: 14px;color: #aaaaaa;">有效期：</div>
												<div
													style="display: flex;align-items: center;justify-content: space-between;margin-top: 5px;">
													<div
														style="padding: 5px 10px;background-color: #dee9ff;display: flex;align-items: center;justify-content: space-between;width: 42%;">
														<img style="width: 14px;height: 15px;"
															src="@/assets/images/industryNews23.png" alt="">
														<span v-if="item.createTime"
															style="font-size: 14px;color: #555555;">{{updateTimeChange(item.createTime)}}</span>
													</div>
													<div style="font-size: 14px;color: #444444;">-
													</div>
													<div
														style="padding: 5px 10px;background-color: #dee9ff;display: flex;align-items: center;justify-content: space-between;width: 42%;">
														<img style="width: 14px;height: 15px;"
															src="@/assets/images/industryNews23.png" alt="">
														<span v-if="item.effectiveTime"
															style="font-size: 14px;color: #555555;">{{updateTimeChange(item.effectiveTime)}}</span>
													</div>
												</div>

												<div
													style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;margin-top: 12px;">
													<div style="display: flex;align-items: center;">
														<img style="width: 16px;height: 16px;"
															src="@/assets/images/industryNews8.png">
														<span
															style="color: #555;margin-left: 3px;">{{item.userName}}</span>
													</div>

													<div style="display: flex;align-items: center;">
														<span
															style="color: #aaa;margin-left: 3px;">职务:{{item.dept}}</span>
													</div>
												</div>
											</div>

											<div
												style="font-size: 16px;color: #2468f2;text-align: center;padding: 10px 0;"
												class="apply">
												查看详情
											</div>
										</div>
									</el-col>

									<el-empty v-if="listData.length==0 && loading==false" description="暂无内容"></el-empty>
								</el-row>
							</div>
						</div>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<div style="text-align: center; margin-top: 40px">
							<el-pagination v-if="listData.length!=0" background layout="prev, pager, next"
								:total="total" :page-size="5" :pager-count="5" @current-change="handleCurrentChange">
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

		<Footer />

		<newDialog ref="newDialog" @getNewList="contributeSuccess"></newDialog>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import newDialog from "./newDialog";
	import {
		getDemandList
	} from "@/request/api/demand";
	export default {
		components: {
			Header,
			Footer,
			newDialog
		},
		data() {
			return {
				input: "",
				menuIndex: 0,
				loading: false,
				page: 1,
				total: 0,
				listData: [],
				userInfo:{}
			};
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo',this.userInfo)
			}
			this.getList()
		},
		mounted() {
			// console.log("mounted");
		},
		methods: {
			// 查看详情
			toCollectDetail(id){
				this.$router.push({
					name: "demandCollectDetail",
					query: {
						id
					},
				});
			},
			// 提示
			contributeSuccess() {
				setTimeout(()=>{
					this.$confirm("是否去个人中心查看?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}).then(() => {
						this.$router.push({
							name: "myDemand"
						});
					}).catch(() => {
					});
				},500)
			},
			// 格式化时间
			updateTimeChange(val){
				return this.$moment(val).format('YYYY-MM-DD')
			},
			// 点击搜索
			handleSearch(){
				this.getList()
			},
			// 发布需求
			publishDemand() {
				if (window.sessionStorage.getItem("userInfo") !== null) {
					this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
					// console.log('this.userInfo',this.userInfo)
				} else {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				this.$refs.newDialog.open('add')
			},
			// 手机标签
			tabsClick(tab) {
				this.page = 1
				this.menuIndex = tab.name
				this.getList()
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 点击菜单
			handleMenu(index) {
				this.menuIndex = index
				this.page = 1
				// this.getList()
			},
			// 获取列表
			getList() {
				this.listData = []
				this.loading = true
				let params = {
					current: this.page,
					pageSize: 10,
					status: 2,
					// createBy: this.userInfo.id,
					title:this.input
				}
				getDemandList(params).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 1) {
						this.listData = res.data.data.totalList
						this.total = res.data.data.total
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			todetail(id) {
				this.$router.push({
					name: "industryNewDetail",
					query: {
						id,
						menuIndex: this.menuIndex
					},
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 0 10px !important;
		}

		.mobileNone {
			display: none;
		}

		.mobileBlock {
			display: block !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}

	/deep/.el-input-group__append {
		background-color: #409EFF;
	}
	.plan:hover {
		cursor: pointer;
		overflow: hidden;
		// box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 8px 8px rgb(0 44 102 / 5%);
		transform: scale(1.01, 1.01);
		// transition-delay: 0.15s;
	
		.apply {
			transition-delay: 0.15s;
			background-color: #2468f2;
			color: #fff !important;
		}
		.apply2 {
			transition-delay: 0.15s;
			color: #999 !important;
		}
	}
	.bannerWrapper{
	    position: relative;
	}
	.mapNav{
	   margin:20px 0;
	}
	.topTitle{
	    color:#fff;
	    height:100px;
	    font-size:30px;
	    line-height: 100px;
	    font-weight:800;
	    text-align: center;
	    background: url('~@/assets/images/cs4.png');
	}
</style>